<template>
    <div class="cell-item" @click="onCellClick(item)">
        <div class="cell-header van-hairline--bottom">
            订单号：{{item.orderno}}
            <div class="order-status">
                {{item.state|stateLabel}}
            </div>
        </div>
        <div class="cell-content van-hairline--bottom">
            <hl-field :show-bottom-border="false" :margin="false" :value="item.startaddress">
            </hl-field>
            <hl-field :show-bottom-border="false" :margin="false" :red="true" :value="item.targetaddress">
            </hl-field>
            <hl-field :show-bottom-border="false" :margin="false" placeholder="" :value="`下单时间：${item.createtime}`">
                <i class="iconfont icon-shijian" style="font-size: 18px;" slot="prefix"></i>
            </hl-field>
        </div>

    </div>
</template>

<script>
    import HlField from "./HlField";

    export default {
        name: "ShareOrderCell",
        components: {HlField},
        data() {
            return {}
        },
        props: {
            item: {
                default() {
                    return {}
                }
            }
        },


        filters: {
            stateLabel(value) {
                switch (value) {
                    case  0:
                        return "已完成";
                    case 11:
                        return "待接单";
                    case 1:
                        return "待接驾";
                    case 2:
                        return "行程中";
                    case 3:
                        return "待支付";
                    case 4:
                        return "已取消";

                }
            }
        },
        methods: {
            onCellClick(item) {
                if (item.state == 11 || item.state == 1 || item.state == 2) {
                    let type = 0;
                    if (item.state == 11) {
                        type = 0;
                    } else if (item.state == 1) {
                        type = 1;
                    } else if (item.state == 2) {
                        type = 2;
                    }
                    this.$router.pushTrasnlate({
                        path: '/share/map', query: {
                            start: item.startlocation,
                            target: item.targetlocation,
                            orderNo: item.orderno,
                            type
                        }
                    })
                }
            },
        }
    }
</script>

<style scoped lang="less">

    .cell-item {
        min-height: 80px;
        background: #fff;
        margin-top: 12px;
        margin-left: 12px;
        margin-right: 12px;
        border-radius: 3px;
        &:active {
            background: darken(#fff, 5%);
        }
        &:last-child {
            margin-bottom: 12px;
        }
        .cell-header {
            padding: 12px;
            font-size: 14px;
            color: #444;
            display: flex;
            flex-direction: row;
            .order-status {
                margin-left: auto;
                color: #25a3ff;
            }
        }
        .cell-content {
            margin-bottom: 8px;
        }
        .cell-action {
            padding: 16px;
        }
    }

</style>